<template>
  <div class="views-container">
    <div class="wlm-table">
      <!-- 工具条区域 -->
      <div class="wlm-table-header">
        <el-form
          :model="tableFormatData.mainTable.files"
          size="small"
          label-width="80px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item class="filter">
            <el-form-item label="用户昵称：">
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.mainTable.files.nickName"
                placeholder="请输入用户昵称"
                style="width: 160px"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.mainTable.files.mobile"
                placeholder="请输入手机号："
                style="width: 160px"
              ></el-input>
            </el-form-item>
            <el-form-item label="卡信息：">
              <el-select
                filterable
                v-model="tableFormatData.mainTable.files.card_id"
                placeholder="请选择或输入关键词搜索"
              >
                <el-option
                  v-for="item in cardCate"
                  :key="item.card_id"
                  :label="item.title"
                  :value="item.card_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item label="" class="filter-btns">
            <el-button v-waves type="primary" @click="filesSerch"
              >筛选</el-button
            >
            <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 工具条区域 end -->
      <!-- 表格区域 -->
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.mainTable.key"
          :default-sort="{ prop: 'sort', order: 'descending' }"
          :data="tableFormatData.mainTable.tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop="name" label="用户信息">
            <template slot-scope="scope">
              <el-row type="flex" align="middle" :gutter="8">
                <el-col style="width: auto">
                  <el-avatar
                    size="medium"
                    :src="scope.row.avatarUrl"
                  ></el-avatar>
                </el-col>
                <el-col style="width: auto">
                  <span>{{ scope.row.nickName }}</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="用户电话" />
          <el-table-column prop="title" label="卡信息" />
          <el-table-column prop="sum_number" label="购买次数" />
          <el-table-column prop="number" label="剩余次数" />
          <el-table-column prop="status" label="使用状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">使用中</span>
              <span v-else-if="scope.row.status == 2">禁用</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleBtnChangeNumClick(scope.row)"
                >调整次数</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                size="mini"
                @click="
                  changeTableItem(
                    {
                      id: scope.row.id,
                      status: scope.row.status,
                    },
                    tableFormatData.mainTable.api.change.status
                  )
                "
                >禁用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.mainTable.pagination.page"
            :page-sizes="tableFormatData.mainTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.mainTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="
              hasTableData ? tableFormatData.mainTable.pagination.total : 0
            "
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表格区域 end -->
      <!-- 编辑次数弹窗 -->
      <el-dialog
        :visible.sync="numDialogVisible"
        custom-class="reset-pwd wlm-form-dialog dialog-table"
      >
        <div class="wlm-form" v-if="numDialogVisible">
          <div class="wlm-form-header wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">调整次数</span>
          </div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <!-- 表单 -->
            <div class="wlm-form-content">
              <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                  <el-form
                    ref="numDialogForm"
                    :model="numDialogForm"
                    :rules="numDialogFormRules"
                    size="small"
                    label-width="100px"
                    class="retail-form"
                    label-position="right"
                  >
                    <!-- 剩余次数调整 -->
                    <el-form-item label="剩余次数调整" prop="number">
                      <el-input-number
                        class="wlm-input-auto"
                        v-model="numDialogForm.number"
                        :precision="0"
                        placeholder="请输入剩余次数"
                        style="width: 160px"
                        :controls="false"
                      />
                      <div class="form-help">备注：填入负数为减，填入正数为加</div>
                    </el-form-item>
                  </el-form>
                  <!-- 历史调整记录 -->
                  <div>
                    <h4>历史调整记录</h4>
                    <el-table :data="numTableData">
                      <el-table-column
                        width="180"
                        prop="check_time"
                        label="时间"
                      >
                        <template slot-scope="scope">
                          {{
                            scope.row.check_time
                              | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="hx_number" label="调整次数" />
                      <el-table-column prop="have_number" label="剩余次数" />
                    </el-table>
                  </div>
                  <!-- 历史调整记录 end -->
                </div>
              </div>
            </div>
            <!-- 表单 -->
          </el-scrollbar>
        </div>

        <footer
          class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter"
        >
          <el-button
            :loading="numDialogLoading"
            size="small"
            type="primary"
            @click="handleBtnNumDialogFormSaveClick"
            >保存</el-button
          >
        </footer>
      </el-dialog>
      <!-- 编辑次数弹窗 end -->
    </div>
  </div>
</template>

<script>
import fp from "lodash/fp";
import {
  cardUserIndex,
  cardLists,
  changeNumber,
  changeLists,
  cardUserEditStatus,
} from "@/api/cardBag";
import mixins from "@/mixins/mixins";
import ChooseFiles from "@/components/ChooseFiles/index";
import waves from "@/directive/waves";
export default {
  mixins: [mixins.getters("Table")],
  components: {
    ChooseFiles,
  },
  directives: {
    waves,
  },
  data() {
    return {
      // 编辑次数的弹窗是否显示
      numDialogVisible: false,
      // 调整次数的表单
      numDialogForm: {
        number: 0,
      },
      // 调整次数的表单规则
      numDialogFormRules: {
        number: [
          {
            message: "请填写剩余次数",
            required: true,
            trigger: "change",
          },
        ],
      },
      // 调整次数表单是否处于loading状态
      numDialogLoading: false,
      // 调整记录表格数据
      numTableData: [],
      // 卡信息列表的数据
      cardCate: [],
      tableFormatData: {
        current: "mainTable",
        mainTable: {
          key: "mainTable",
          api: {
            getList: cardUserIndex,
            change: {
              status: {
                key: "status",
                api: cardUserEditStatus,
              },
            },
          },
          tableData: [],
          files: {
            nickName: "",
            mobile: "",
            card_id: "",
          },
          rowId: "id",
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
    };
  },
  mounted() {
    this.fetchCardCate();
  },
  methods: {
    // 调整次数弹窗点击事件
    handleBtnChangeNumClick(item) {
      // 更改相应表单的值
      this.numDialogForm = {
        id: item.id,
        number: item.number,
      };
      // 显示修改弹窗
      this.numDialogVisible = true;
      // 请求相应调整记录
      this.fetchNumTableData({
        id: item.id,
      });
    },
    // 编辑次数表单保存按钮点击事件
    handleBtnNumDialogFormSaveClick() {
      // 表单校验
      this.$refs.numDialogForm.validate((valid) => {
        if (!valid) {
          console.log("表单不合法");
          return false;
        }
        // 保存
        this.numDialogLoading = true;
        changeNumber({
          id: this.numDialogForm.id,
          number: this.numDialogForm.number,
        })
          .then(() => {
            console.log(111);
            // 隐藏弹窗
            this.numDialogVisible = false;
            this.numDialogLoading = false;
            // 刷新表格数据
            this.getTableList();
          })
          .catch((err) => {
            console.log("失败", err);
            this.numDialogLoading = false;
          });
      });
    },
    showdialog(type, params) {
      if (type === 1) {
        // this.formFormatData=[]
        this.formFormatData.api.submitForm = cardClassSave;
        this.dialogFormVisible = true;
      }
      if (type === 2) {
        this.formFormatData.api.submitForm = cardClassSave;
        this.formFormatDialogEditEvt({
          id: params,
          toggle: "dialogFormVisible",
        });
      }
    },
    saveDialogForm() {
      this.resetDialogFormData({
        name: "",
        sort: "",
        is_show: "",
        image: [],
      });
    },
    // 请求卡信息列表
    fetchCardCate() {
      cardLists({
        page: 1,
        list_rows: 1000,
      }).then((res) => {
        this.cardCate = fp.get("data.data.data", res) || [];
        console.log("fetchCardCate res", res);
      });
    },
    // 请求调整记录表格数据
    fetchNumTableData({ id } = {}) {
      changeLists({
        id,
        page: 1,
        list_rows: 1000,
      }).then((res) => {
        this.numTableData = fp.get("data.data", res) || [];
        console.log("fetchNumTableData res", res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>